<template>
<div>
     <h4>路由</h4>
         <!-- 路由 -->
         <hr>
         <h5>router-link</h5>
        <!-- <router-link tag="div" :to="{name: 'Home'}" style="padding: 10px;background: blue;color:white">a</router-link> -->
        <router-link replace tag="div" to="/b" style="padding: 10px;background: red;color:white">b</router-link>
        <hr>
         <h5>编程式导航</h5>
        <div class="routeFn">
            <span @click="routepush" style="padding: 3px;background: green;color:white">reg</span>
            <!-- <span style="padding: 3px;background: pink;color:white">hello</span> -->
        </div>
        <hr>
        <h5>路由传参</h5>
        <button v-on:click="pushFn('/b')">push-query传参b</button>
        <button v-on:click="aFn">动态路由传参a</button>
        <hr>
        router-view
        <router-view></router-view>
</div>
</template>
    
<script setup lang='ts'>
    // 编程式导航-------------------------------
    import {useRouter} from 'vue-router';
    const router = useRouter();
    // 1.字符串模式
    let routepush1= () => {
    router.push('/b');
    }
    // 2.对象模式
    let routepush2 = () => {
    router.push({
        path: '/b'
    });
    }
    // 3.命名式路由模式
    let routepush = () => {
    router.push({
        name: 'Reg'
    });
    }
     // a标签跳转 直接通过a href也可以跳转但是会刷新页面
    //  <a href="/reg">rrr</a>


    // 历史-------------------------------
    //  横跨历史 该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步
    let backFn = (): void => {
    router.go(1);
    router.go(-1);
    router.forward();
    router.back();
    };

    // 路由传参数-------------------------------
    let pushFn = function(path: string): void  {
        router.push({
            path,
            query: {
                query1: 'hello_world!!1'
            },
            params: {
                path: 'reg'
            }
        })
    };
    let aFn = () => {
        router.push({
            name: 'Home',
            params: {
                id: 9
            },
            query: {
                name: 'home'
            }
        })
    };
//     二者的区别
// query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效

// query 在路由配置不需要设置参数，而 params 必须设置

// query 传递的参数会显示在地址栏中

// params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;

// 路由配置

</script>
    
<style>
    
</style>